<template>
  <div class="Antvx6Chart">
    设备流程图
    <div class="Antvx6Chart-box">
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { Graph } from '@antv/x6';
import { onMounted } from 'vue';

onMounted(() => {
  // initMyFlowChartFn();
  initAntvX6ChartFn();
});

function initAntvX6ChartFn() {
  const data = {
    nodes: [
      {
        id: 'node1',
        shape: 'rect',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: 'hello',
        attrs: {
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: 'node2',
        shape: 'rect',
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: 'world',
        attrs: {
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
    edges: [
      {
        shape: 'edge',
        source: 'node1',
        target: 'node2',
        label: 'x6',
        attrs: {
          line: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
          },
        },
      },
    ],
  };

  const graph = new Graph({
    container: document.getElementById('container'),
    autoResize: true,
    // width: 800,
    // height: 600,
    background: {
      color: '#F2F7FA',
    },
    grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
  });

  graph.fromJSON(data);
  graph.centerContent();
}
</script>

<style lang="less" scoped>
.Antvx6Chart {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #2228;
  .Antvx6Chart-box {
    width: 80vw;
    height: 80vh;
    margin: auto;
    #container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
